<template>
  <div>
    <van-cell >
      <!-- 使用 title 插槽来自定义标题 -->
      <template #title>
        <div class="title-box">
          <span>{{ value.title }}</span>
          <!-- 单图 -->
          <img
            class="thumb"
            :src="value.cover.images[0]"
            alt="thumb"
            v-if="value.cover.images && value.cover.images.length == 1"
          />
        </div>
        <div
          v-if="value.cover.images && value.cover.images.length != 1"
          class="thumb-box"
        >
          <!-- 多图 -->
          <img
            class="thumb"
            :src="image"
            alt="thumb"
            v-for="(image, index) in value.cover.images"
            :key="index"
          />
        </div>
      </template>
      <!-- label插槽 -->
      <template #label>
        <div class="label-box">
          <div>
            <span> {{ value.aut_name }} </span>
            <span> {{ value.comm_count }}评论 </span>
            <span> {{ time }} </span>
            <!-- 组织冒泡从而防止点x却触发路由 -->
            <van-icon @click.stop="show = true" name="cross" v-show="$route.path=='/layout/home'" />
          </div>
          <!-- 反馈按钮 -->
        </div>
      </template>
    </van-cell>
    <!-- 反馈面板 -->
    <!-- 使用get-container改变反馈面板挂载节点 -->
    <van-action-sheet
      :cancel-text="bottomText"
      get-container="body"
      v-model="show"
      :actions="actions"
      @select="onSelect"
      @cancel='cancelFn'
      @close='closeFn'
    />
  </div>
</template>

<script>
import { List, Cell, CellGroup, Icon, Notify } from 'vant'
import { timeAgo } from '@/utils/date'
import { dislikeArticle } from '@/api'
import Vue from 'vue'

Vue.use(List)
Vue.use(Icon)
Vue.use(Cell)
Vue.use(CellGroup)
export default {
  name: 'ArticleItem',
  props: ['value'],
  computed: {
    time () {
      return timeAgo(this.value.pubdate)
    }
  },
  data () {
    return {
      show: false,
      bottomText: '取消',
      actions: [{ name: '不感兴趣' }, { name: '反馈垃圾内容' }],
      firstActions: [{ name: '不感兴趣' }, { name: '反馈垃圾内容' }],
      secondActions: [
        {
          value: 0,
          name: '其它问题'
        },
        {
          value: 1,
          name: '标题夸张'
        },
        {
          value: 2,
          name: '低俗色情'
        },
        {
          value: 3,
          name: '错别字多'
        },
        {
          value: 4,
          name: '旧闻重复'
        },
        {
          value: 6,
          name: '内容不实'
        },
        {
          value: 8,
          name: '侵权'
        },
        {
          value: 5,
          name: '广告软文'
        },
        {
          value: 7,
          name: '涉嫌违法犯罪'
        }
      ]
    }
  },
  methods: {
    async onSelect (action, item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      if (action.name === '反馈垃圾内容') {
        this.actions = this.secondActions
        this.bottomText = '返回'
      } else if (action.name === '不感兴趣') {
        try {
          await dislikeArticle(this.value.art_id)
          Notify({ type: 'success', message: '反馈成功' })
        } catch (err) {
          Notify({ type: 'warning', message: '请先登录' })
        }
        this.show = false
      } else {
        this.$emit('reportEV', this.value.art_id, action.value)
        this.show = false
      }
    },
    cancelFn () {
      if (this.bottomText === '返回') {
        this.show = true
        this.actions = this.firstActions
        this.bottomText = '取消'
      }
    },
    closeFn () {
      this.actions = this.firstActions
    }
  }
}
</script>

<style scoped lang='less'>
/* 标题样式 */
.title-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* label描述样式 */
.label-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 文章信息span */
.label-box span {
  margin: 0 3px;
  &:first-child {
    margin-left: 0;
  }
}

.thumb {
  width: 113px;
  height: 70px;
  background-color: #f8f8f8;
  object-fit: cover;
}
.thumb-box {
  display: flex;
  justify-content: space-between;
}
</style>
